<template>
  <div class="root base-background-img">
    <div class="home">
      <router-link to="/">
        <img src="~@/assets/youxiaoxianjie/home/home.png">
      </router-link>
    </div>
    <div class="back">
      <router-link to="/youxiao">
        <img src="~@/assets/youxiaoxianjie/home/back.png">
      </router-link>
    </div>
    <div class="type">
        <img src="~@/assets/youxiaoxianjie/home/title.png">
    </div>
    <ul class="ul-item">
    <li v-for='(item, index) in tabs' :key="index" :class="{'active': item.isSelected}" @click="setCur(item)">
      <img class="danyunmu" :src="item.img" alt="">
    </li>
    </ul>
    <component :is="currentView" keep-alive></component>
  </div>
</template>

<script>
import danyunmu from './danyunmu'
import shengmu from './shengmu'
import fuyunmu from './fuyunmu'
import zhengtirendu from './zhengtirendu'
export default {
  name: 'base',
  data () {
    return {
      currentView: 'youxiao-danyunmu',
      tabs: [{
        isSelected: 1,
        name: 'youxiao-danyunmu',
        img: 'static/youxiao/home/danyunmu_2.png'
      }, {
        isSelected: 0,
        name: 'youxiao-shengmu',
        img: 'static/youxiao/home/shengmu_2.png'
      }, {
        isSelected: 0,
        name: 'youxiao-fuyunmu',
        img: 'static/youxiao/home/fuyunmu_2.png'
      }, {
        isSelected: 0,
        name: 'youxiao-zhengtirendu',
        img: 'static/youxiao/home/zhengtirendu_2.png'
      }]
    }
  },
  components: {
    'youxiao-danyunmu': danyunmu,
    'youxiao-shengmu': shengmu,
    'youxiao-fuyunmu': fuyunmu,
    'youxiao-zhengtirendu': zhengtirendu
  },
  created () {
    let that = this
    console.log('base created')
    console.log(that.$route.query.compoent)
    if (that.$route.query.compoent !== undefined) {
      // 传入参数时修改
      that.currentView = that.$route.query.compoent
      this.tabs.forEach(item => {
        item.isSelected = (item.name === that.$route.query.compoent)
      })
    }
  },
  methods: {
    setCur: function (selectedItem) {
      this.currentView = selectedItem.name
      this.tabs.forEach(item => {
        item.isSelected = (item.name === selectedItem.name)
      })
    }
  }
}
</script>

<style scoped>
@import "~@/assets/style/base.css";
.root > div {
  position: absolute;
}
.ul-item {
  margin: 0;
  padding: 0;
  list-style-type: none;
  z-index: 10;
  background-color: #fff;
  top: 116px;
  left: 790px;
  width: 427px;
  height: 45px;
  position: absolute;
}
li {
  float: left;
  margin-right: 1px;
  height: 45px;
  width: 106px;
  position: initial;
}
li > img {
  height: 45px;
  width: 106px;
}
li:last-child{
  margin-right: 0;
}
.active {
  background-color: #3D115B;
}
.home {
  top: 54px;
  left: 57px;
  z-index: 10;
}
.back {
  top: 153px;
  left: 57px;
  z-index: 10;
}
.type {
  z-index: 10;
  top: 25px;
  left: 775px;
}
.danyumu {
  position: absolute;
  left: 0px;
  top: 0;
}
</style>
